<template>
    <div class="root-lay">
        <!-- <div>3d markup</div> -->
        <threed-view
            class="threed-view"
            ref="threedView"
            @onClickPosition="onClickPosition"
            @onBallMarkerClick="onBallMarkerClick"
        />
        <div class="opt-view" v-if="$hasEditPermission('/BHView')">
            <button v-if="$hasEditPermission('/BHView')" class="select-btn gray" @click="del3dMarker">
                {{ $t("message.public.delete") }}
            </button>

            <button v-if="$hasEditPermission('/BHView')" class="select-btn gray">
                {{ $t("message.public.cancel") }}
            </button>

            <button v-if="$hasEditPermission('/BHView')" class="select-btn blue">
                {{ $t("message.public.confirm") }}
            </button>
        </div>
    </div>
</template>

<script>
import ThreeDBaseCom from "@/components/ThreeDScene/threeDBaseCom.vue";
import threeData from "@/utils/testThreeData.js";
import { getLocalStorage } from "@/utils/storage";

export default {
    props: {},

    components: {
        "threed-view": ThreeDBaseCom,
    },

    data() {
        return {
            tempBallShapes: ["circle", "square", "diamond"],
            tempFillColors: [
                "#f000f0",
                "#00ff00",
                "#0000ff",
                "#ff00ff",
                "#ffff00",
                "#00ffff",
            ],

            select2dMarkerData: null,

            threedMarkerData: [],
            testid: 0,
        };
    },

    methods: {
        initMarkupInScene() {
            this.$refs.threedView.removeAllBallMarkers();
            let _self = this;
            threeData.testTagData.forEach((element) => {
                let tempShapeTypeIndex = this.randomNum(0, 2);
                let tempShapeFillColor = this.randomNum(0, 5);
                let tempShapeBorderColor = this.randomNum(0, 5);
                // inId, inStr, inShapeType, inPos, inFillColor, inBorderColor
                this.$refs.threedView.addBallLabel(
                    this.testid,
                    element.ID,
                    this.tempBallShapes[tempShapeTypeIndex],
                    element.position,
                    this.tempFillColors[tempShapeFillColor],
                    this.tempFillColors[tempShapeBorderColor]
                );

                let temp = {
                    id: this.testid,
                    text: element.ID,
                    shape: this.tempBallShapes[tempShapeTypeIndex],
                    position: element.position,
                    fillcolor: this.tempFillColors[tempShapeFillColor],
                    bordercolor: this.tempFillColors[tempShapeBorderColor],
                };
                this.testid++;
                this.threedMarkerData.push(temp);
            });
        },

        onClickPosition(val) {
            if (this.select2dMarkerData == null) {
                this.$notify({
                    title: "tip",
                    message: "You haven't selected a 2d marker.",
                    duration: 3000,
                });
                return;
            }
            let tempData = this.threedMarkerData.find((e) => {
                return e.text == this.select2dMarkerData.posOrder;
            });
            if (tempData) {
                this.$notify({
                    title: "tip",
                    message: "You haven created a 3d marker on the id.",
                    duration: 3000,
                });
                return;
            }

            // this.threedMarkerData

            let tempShapeTypeIndex = this.randomNum(0, 2);
            let tempShapeFillColor = this.randomNum(0, 5);
            let tempShapeBorderColor = this.randomNum(0, 5);
            this.$refs.threedView.addBallLabel(
                this.testid,
                this.select2dMarkerData.posOrder,
                this.tempBallShapes[tempShapeTypeIndex],
                val,
                this.tempFillColors[tempShapeFillColor],
                this.tempFillColors[tempShapeBorderColor],
                true
            );

            let temp = {
                id: this.testid,
                text: this.select2dMarkerData.posOrder,
                shape: this.tempBallShapes[tempShapeTypeIndex],
                position: val,
                fillcolor: this.tempFillColors[tempShapeFillColor],
                bordercolor: this.tempFillColors[tempShapeBorderColor],
            };
            this.testid++;
            this.threedMarkerData.push(temp);

            this.$emit("onClickPosition", val);
        },

        onBallMarkerClick(inId, inStr) {
            this.toSelect3dBallMarker(inId);
            this.$emit("on3dBallMarkerClick", inStr);
        },

        //生成从minNum到maxNum的随机数
        randomNum(minNum, maxNum) {
            switch (arguments.length) {
                case 1:
                    return parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    return parseInt(
                        Math.random() * (maxNum - minNum + 1) + minNum,
                        10
                    );
                    break;
                default:
                    return 0;
                    break;
            }
        },

        del3dMarker() {
            let rid = this.$refs.threedView.removeMarkerSelected();
            let tempIndex = this.threedMarkerData.findIndex(e => {
                    return e.id == rid
            })

            this.threedMarkerData.splice(tempIndex, 1);
        },

        toSelect3dBallMarker(inId) {
            this.$refs.threedView.toSelect3dBallMarker(inId);
        },

        toSelect3dBallMarkerByStr(inStr) {
            let tempData = this.threedMarkerData.find((e) => {
                return e.text == inStr;
            });

            if (tempData)
                this.$refs.threedView.toSelect3dBallMarker(tempData.id);
            else this.$refs.threedView.toSelect3dBallMarker(-1);
        },

        setSelect2dMarkerupData(inData) {
            this.select2dMarkerData = inData;
        },
    },

    mounted() {
        this.$refs.threedView.initEngineAndScene(
            threeData.modelJsonUrl,
            threeData.modelId,
            threeData.initView
        );

        this.initMarkupInScene();
    },

    computed: {
    },	
};
</script>

<style scoped lang="scss">
.root-lay {
    //     width: 100%;
    //     height: 100%;
    //     background-color: darkgray;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-direction: column;
}

.threed-view {
    width: 100%;
    height: calc(100% - 36px);
    flex-grow: 1;
}

.opt-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 36px;
    background-color: #fff;

    .select-btn {
        width: 90px;
        height: 24px;
        margin-left: 20px;
        border: 1px solid #eaeaeb;
        border-radius: 4px;
        cursor: pointer;
    }

    .gray {
        color: rgb(89, 89, 89);
        background: #e9e9e9;
    }

    .blue {
        color: #fff;
        background: #106ebe;
    }
}
</style>